﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Electman - Electrician HTML Template | Home Page 02</title>
<!-- Stylesheets -->
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<!-- Color File -->
<link href="/css/color.css" rel="stylesheet">
<!-- Responsive File -->
<link href="/css/responsive.css" rel="stylesheet">
<link href="/css/index.css" rel="stylesheet">
<link href="/css/search.css" rel="stylesheet">
<link href="/css/public.css" rel="stylesheet">

<link rel="shortcut icon" href="/images/favicon.png" type="image/x-icon">
<link rel="icon" href="/images/favicon.png" type="image/x-icon">

<!-- Responsive Settings -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>

<body>

<div class="page-wrapper" id="app">
    <!-- Preloader -->
    <div class="preloader"><div class="icon"></div></div>

 <!-- Main Header -->
    <header class="main-header header-style-one inner-page-header">
        <!-- Header Top -->
        <div class="header-top header-top-one">
            <div class="auto-container">
				<div class="inner clearfix">
                    <div class="top-left clearfix">
                        <div class="top-text">We are Open Everyday at 09:00 am - 10:00 pm</div>
                    </div>
    
                    <div class="top-right clearfix">
                        <div class="email">
                            <a href="mailto:support@domain.com">Email: ourcomply@mail.com</a>
                        </div>
                        <ul class="social-links clearfix">
                            <li><a href="#"><span class="fab fa-twitter"></span></a></li>
                            <li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
                            <li><a href="#"><span class="fab fa-instagram"></span></a></li>
                            <li><a href="#"><span class="fab fa-linkedin-in"></span></a></li>
                            <li><a href="#"><span class="fab fa-pinterest-p"></span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Header Upper -->
        <div class="header-main-box">
            <div class="auto-container">
                <div class="inner-container">
                    <div class="upper-row clearfix">
                        <!--Logo-->
                        <div class="logo-box">
                            <div class="logo"><a href="index.html" title="Electman - Electrician HTML Template">
							<span class="logo_bolt"><img src="" alt="Electrician"></span>
							<img src="/images/logo.png" alt="Electman - Electrician HTML Template" title="Electman - Electrician HTML Template">
							
							
							</a></div>
                        </div>
                        <div class="right-info clearfix">
                            <!--Info-->
                            <div class="info clearfix">
                                <!--Info Block-->
                                <div class="info-block">
                                    <div class="icon-box">
                                        <span class="icon">
                                            <img src="/images/icons/icon-call-1.png" alt="">
                                        </span>
                                    </div>
                                    <strong>Toll Free Call</strong>
                                    <div class="info-text">
                                        <a href="#">(+357) 964587</a>
                                    </div>
                                </div>
                                
                            </div>
                            <!--Link Box-->
                            <div class="right-info clearfix">
                                <a href="logreg.html" class="login"><p>登录</p></a>

                                <!--试验-->
                                <div id="cart_box" class="cart_box" @mouseover="searchCart">
                                    <a id="cart" class="cart_link" href="#" rel="nofollow">
                                     <span class="text">购物车</span>
                                        <img src="/images/icons/shopping.png" width="24" height="24" class="cart_gif">
                                       
                                        <!-- 购物车没有物品时，隐藏此num -->
                                        <span class="num">12</span>
                                        <s class="icon_arrow_right"></s>
                                    </a>
                    
                                    <div class="cart_content" id="cart_content">
                                        <i class="cart-icons"></i>
                                        <!-- 购物车没有物品时，显示cart_content_null、隐藏cart_content_all -->
                                        <div class="cart_content_null" style="display: none;">购物车中还没有商品，<br>快去挑选心爱的商品吧！</div>
                                        <div class="cart_content_all" style="display: block;">
                                            <div class="cart_content_center">
                                                <!-- v-for="item in goodsList" -->
                                                <div class="cart_con_single" v-for="item in goodsList">
                                                    <div class="single_pic">
                                                        <a href="#" target="_blank" alt="">
                                                            <img src="/images/goods_img01.jpg" />
                                                        </a>
                                                    </div>
                                                    <div class="single_info">
                                                        <a href="#" target="_blank" alt="" class="name">{{item.name}}</a>
                                                        <span class="price">￥{{item.price}}.00</span>
                                                        <span class="price_plus"> x </span>
                                                        <span class="price_num">{{item.num}}</span>
                                                    </div>
                                                </div>
                    
                                            </div>
                                            <div class="con_all">
                                                <div class="price_whole"><span>共<span class="num_all">{{result.totalNum}}</span>件商品</span></div>
                                                <div><span class="price_gongji">共计<em>￥</em><span class="total_price">{{result.totalPrice}}</span></span><a href="shoppingCart.html" class="cart_btn" rel="nofollow">去购物车结算</a></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        
                    </div>

                    <div class="lower-row">
                        <!--Nav Box-->
                        <div class="nav-box clearfix">
                            <div class="nav-outer clearfix">
                                <!--Mobile Navigation Toggler-->
                                <div class="mobile-nav-toggler"><span class="icon flaticon-menu-1"></span></div>

                                <!-- Main Menu -->
                                <nav class="main-menu navbar-expand-md navbar-light">
                                    <div class="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
                                        <ul class="navigation clearfix">
                                            <li class="current"><a href="index.html">Home</a>
                                            </li>
                                            <li class="dropdown"><a href="about.html">About Us</a>
                                            <ul>
                                                <li><a href="about.html">About Us</a></li>
												<li><a href="team.html">Our Team</a></li>
												<li><a href="pricing.html">Our Pricing</a></li>
												<li><a href="whyus.html">Why Choose Us</a></li>
												<li><a href="testimonials.html">Testimonials</a></li>
												<li><a href="faqs.html">FAQ's</a></li>
												
                                            </ul>
                                        </li>
                                            <li class="dropdown"><a href="services.html">Services</a>
                                                <ul>
                                                    <li><a href="services.html">All Services</a></li>
                                                    <li><a href="serdetails1.html">Electrical Repairs</a></li>
                                                    <li><a href="serdetails2.html">Lighting Upgrades</a></li>
                                                    <li><a href="serdetails3.html">Surge Protection</a></li>
                                                    <li><a href="serdetails4.html">Install a Ceiling Fan</a></li>
                                                    <li><a href="serdetails5.html">Digital Thermostat </a></li>
                                                    <li><a href="serdetails6.html">Baseboard Heating </a></li>
                                                </ul>
                                            </li>
                                            <li class="dropdown"><a href="projects.html">Projects</a>
											<ul>
                                                    <li><a href="projects.html">Projects Style 01</a></li>
													<li><a href="projects2.html">Projects Style 02</a></li>
													<li><a href="projectdetails.html">Projects Details</a></li>
                                                   
                                                </ul>
											
											</li>
											<li><a href="shop.html">Shop
											</a></li>
                                            <li class="dropdown"><a href="blog.html">News</a>
                                                <ul>
                                                    <li><a href="blog.html">Our News Blog</a></li>
                                                    <li><a href="blog-single.html"> Post Details</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="contact.html">Contact
											</a></li>
                                        </ul>
                                    </div>
                                </nav>
                            </div>

                            <!--Search Btn-->
                            <div class="search-btn" @click="searchToggler">
                                <button type="button" class="theme-btn search-toggler"><span class="fa fa-search"></span></button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End Header Upper-->

        <!-- Sticky Header  -->
        <div class="sticky-header">
            <div class="auto-container clearfix">
                <!--Logo-->
                <div class="logo pull-left">
                    <a href="index.html" title=""><img src="/images/logo_small.png" alt="" title=""></a>
                </div>
                <!--Right Col-->
                <div class="pull-right">
                    <!-- Main Menu -->
                    <nav class="main-menu clearfix">
                        <!--Keep This Empty / Menu will come through Javascript-->
                    </nav><!-- Main Menu End-->
                </div>
            </div>
        </div><!-- End Sticky Menu -->

        <!-- Mobile Menu  -->
        <div class="mobile-menu">
            <div class="menu-backdrop"></div>
            <div class="close-btn"><span class="icon flaticon-cancel"></span></div>
            
            <nav class="menu-box">
                <div class="nav-logo"><a href="index.html"><img src="/images/nav-logo.png" alt="" title=""></a></div>
                <div class="menu-outer"><!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header--></div>
				<!--Social Links-->
				<div class="social-links">
					<ul class="clearfix">
						<li><a href="#"><span class="fab fa-twitter"></span></a></li>
						<li><a href="#"><span class="fab fa-facebook-square"></span></a></li>
						<li><a href="#"><span class="fab fa-pinterest-p"></span></a></li>
						<li><a href="#"><span class="fab fa-instagram"></span></a></li>
						<li><a href="#"><span class="fab fa-youtube"></span></a></li>
					</ul>
                </div>
            </nav>
        </div><!-- End Mobile Menu -->
    </header>
    <!-- End Main Header -->

    <!--Search Popup-->
    <div id="search-popup" :class="['search-popup',{'popup-visible': isActive}]" @keydown.27="isEnter">
        <div class="close-search theme-btn"><span class="flaticon-cancel" @click="shutSearch"></span></div>
        <div class="popup-inner">
            <div class="overlay-layer"></div>
            <div class="search-form">
                <form method="post" action="index.html">
                    <div class="form-group">
                        <fieldset>
                            <input type="search" class="form-control" name="search-input" value="" placeholder="Search Here" required >
                            <input type="button" value="Search Now!" class="theme-btn" @click="dosearch">
                        </fieldset>
                    </div>
                </form>
                
                <br>
                <h3>Recent Search Keywords</h3>
                <ul class="recent-searches">
                    <li><a href="#">Finance</a></li>
                    <li><a href="#">Idea</a></li>
                    <li><a href="#">Service</a></li>
                    <li><a href="#">Growth</a></li>
                    <li><a href="#">Plan</a></li>
                </ul>
            
            </div>
            
        </div>
    </div>


  <!-- Page Banner Section -->
    <section class="page-banner">
        <div class="image-layer" style="background-image: url(/images/background/banner-bg-8.jpg);"></div>

        <div class="auto-container">
            <h1>Shop</h1>
			<div class="breadcrumb-box">
                <div class="auto-container">
                    <ul class="bread-crumb clearfix">
                        <li><a href="index.html">Home</a></li>
                        <li>Shop</li>
                    </ul>
                </div>
            </div>

            
        </div>

    </section>


	<!--Features Section-->
    <section class="shop features-section">
       
        <div class="auto-container">
            <div class="row clearfix">
			<!--Sidebar Side-->
                <div class="sidebar-side col-lg-3 col-md-12 col-sm-12">
                    <aside class="sidebar blog-sidebar">
                        <!--Sidebar Widget-->
                        <div class="sidebar-widget search-box">
                            <form method="post" action="blog.html">
                                <div class="form-group">
                                    <input type="search" name="search-field" value="" placeholder="Search.." required="" v-model="keywords">
                                    <button type="button" @click="dosearch"><span class="icon fa fa-search"></span></button>
                                </div>
                            </form>

                        </div>
                       
                        
                        <div class="sidebar-widget recent-posts">
                            <div class="widget-inner">
                                <div class="sidebar-title">
                                    <h3>Recent Product</h3>
                                    <div class="bottom-dots clearfix">
                                        <span class="dot line-dot"></span>
                                        <span class="dot"></span>
                                        <span class="dot"></span>
                                        <span class="dot"></span>
                                    </div>
                                </div>

                                <div class="post" @mouseover="showFurniture" @mouseout="hideFurniture">
                                    <div>家电安装</div>
                                </div>

                                <div class="post" @mouseover="showAppliance" @mouseout="hideAppliance">
                                    <div>家电维修</div>
                                </div>
                                    
                                <div class="post" @mouseover="showLight" @mouseout="hideLight">
                                    <div>家电清洗</div>
                                </div>
                            </div>
                        </div>

                        <!--Sidebar Widget-->
                        <div class="sidebar-widget info-widget">
                            <div class="widget-inner">
                                <div class="image"><a href="#"><img src="/images/main/5.jpg" alt=""></a></div>
                                <div class="lower">
                                    <div class="subtitle">Got any Questions? <br>Call us Today!</div>
                                    <div class="icon-box"><span class="flaticon-telephone-1"></span></div>
                                    <div class="phone"><a href="#">1-222-303-4500</a></div>
                                    <div class="email"><a href="mailto:support@Electman.net">support@Electman.net</a></div>
                                </div>
                            </div>
                        </div>
                    </aside>
                </div>
                <div class="searchList">
                    <div class="searchItem" v-show="furnitureFlag" @mouseover="showFurniture" @mouseout="hideFurniture">
                        <span>
                            <a @click="fastsearch"> 空调安装 </a>
                            <a @click="fastsearch"> 电冰箱安装 </a>
                            <a @click="fastsearch"> 电视安装 </a>
                            <a @click="fastsearch"> 洗衣机安装 </a>
                            <a @click="fastsearch"> 油烟机安装 </a>
                            <a @click="fastsearch">热水器安装</a>
                            <br>
                        </span>
                    </div>
                    <div class="searchItem" v-show="applianceFlag" @mouseover="showAppliance" @mouseout="hideAppliance">
                        <span>
                            <a @click="fastsearch"> 空调维修 </a>
                            <a @click="fastsearch"> 电冰箱维修 </a>
                            <a @click="fastsearch"> 电视维修 </a>
                            <a @click="fastsearch"> 洗衣机维修 </a>
                            <a @click="fastsearch"> 油烟机维修 </a>
                            <a @click="fastsearch"> 热水器维修 </a>
                            <a @click="fastsearch"> 电灶维修 </a>
                            <a @click="fastsearch"> 空气净化器维修 </a>
                            <br>
                        </span>
                    </div>
                    <div class="searchItem" v-show="lightFlag" @mouseover="showLight" @mouseout="hideLight">
                        <span>
                            <a @click="fastsearch"> 空调清洗 </a>
                            <a @click="fastsearch"> 电冰箱清洗 </a>
                            <a @click="fastsearch"> 电灶清洗 </a>
                            <a @click="fastsearch"> 油烟机清洗 </a>
                            <a @click="fastsearch"> 热水器清洗 </a>
                            <a @click="fastsearch"> 空气净化器清洗 </a>
                            <br>
                        </span>
                    </div>
                </div>
			<div class="col-lg-9 col-md-12 col-sm-12">
            <div class="row clearfix">    
				<!--Features Block-->
                

                <!--Features Block-->
                <div class="featured-block col-lg-4 col-md-6 col-sm-12 wow fadeInUp" data-wow-delay="500ms"  data-wow-duration="2000ms" v-for="item in skuList">
                    <div class="inner-box">
                        <div class="image-box">
                            <figure class="image"><img :src="item.image" alt=""></figure>
                        </div>
                        <div class="lower-title">
						<span class="p_price">￥{{item.price}}.00</span>
						<div class="p_rating">
						<span class="fa fa-star"></span>
						<span class="fa fa-star"></span>
						<span class="fa fa-star"></span>
						<span class="fa fa-star"></span>
						<span class="fa fa-star"></span>
						</div>
						
						<h3><span class="icon fa fa-cart-plus"></span><a href="#" v-html="item.name">{{item.name}}</a></h3>
						</div>
                        <div class="hover-box">
                            <div class="image-layer" style="background-image: url(/images/main/p1.jpg);"></div>
                            <div class="hover-inner">
                                <div class="content">
                                    <div class="icon-box"><span class="fab fa-magento"></span></div>
                                    <h3><a href="#">Combination Toggle Switch</a></h3>
                                    <div class="text">Duden flows by their place & supplies it with the necessary regelialia in which roasted parts of sentences ...</div>
                                    <div class="link">
                                        <a href="#"><span class="txt">Learn More</span><span class="icon flaticon-arrows-11"></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
				
				<el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="cur_page"
                :page-size="pageSize"
                layout="prev, pager, next"
                :total="totalCount">
                </el-pagination>
            </div>  
			</div><!-- col-9 end -->
			
			</div>
        </div>
    </section>


    <!--Call To Action Section-->
    <section class="call-to-action">
        <div class="image-layer" style="background-image: url(/images/main/bg4.jpg);"></div>
        <div class="auto-container">
            <div class="row clearfix">
                <div class="title-column col-xl-7 col-lg-12 col-md-12">
                    <div class="inner wow fadeInLeft" data-wow-delay="0ms"  data-wow-duration="2000ms">
                        <h2>Dedicated To Bring TheWorld  <br>Powerful Sustainable Energy Solutions</h2>
                    </div>
                </div>
                <div class="links-column col-xl-5 col-lg-12 col-md-12">
                    <div class="inner wow fadeInRight" data-wow-delay="0ms"  data-wow-duration="2000ms">
                        <div class="links-box">
                            <a href="contact.html" class="theme-btn btn-style-five"><div class="btn-title"><span class="btn-txt">Start a Project</span><span class="btn-icon"><span class="icon flaticon-arrows-11"></span> </span></div></a>
                            <a href="contact.html" class="theme-btn btn-style-four"><div class="btn-title"><span class="btn-txt">Get More Info</span><span class="btn-icon"><span class="icon flaticon-arrows-11"></span> </span></div></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

  <!-- Main Footer / Style Five-->
    <footer class="main-footer footer-style-five">

        <!--Widgets Section-->
        <div class="widgets-section">
            <div class="auto-container">
                <div class="row clearfix">
                    
                    <!--Column-->
                    <div class="footer-column col-lg-4 col-md-5 col-sm-12">
                        <div class="footer-widget about-widget">
                            <div class="footer-logo-box">
                                <a href="index.html" title="Electman - Electrician HTML Template"><img src="/images/logo2.png" alt="" title=""></a>
                            </div>
                            <div class="about-text">Integer lobortis sem consequat imperdiet In nulla viverra ut lorem ut, dapibus conse etur diam. Nun bibendum diet condiment sed ipsum duis lacinia.</div>
                            <div class="footer-social">
                                <ul class="footer-social-two clearfix">
                                    <li><a href="#"><span class="fab fa-twitter"></span></a></li>
                                    <li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
                                    <li><a href="#"><span class="fab fa-instagram"></span></a></li>
                                    <li><a href="#"><span class="fab fa-linkedin-in"></span></a></li>
                                    <li><a href="#"><span class="fab fa-pinterest-p"></span></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!--Column-->
                    <div class="big-column col-lg-5 col-md-7 col-sm-12">
                        <div class="row clearfix">
                            <!--Column-->
                            <div class="footer-column col-lg-6 col-md-6 col-sm-12">
                                <div class="footer-widget links-widget">
                                    <div class="widget-title">
                                        <h3>Quick Links</h3>
                                    </div>
                                    <div class="widget-content">
                                        <ul>
                                            <li><a href="#">About Electman</a></li>
                                            <li><a href="#">News Blog</a></li>
                                            <li><a href="#">Careers</a></li>
                                            <li><a href="#">Case Studies</a></li>
                                            <li><a href="#">Meet Our Team</a></li>
                                            <li><a href="#">Testimonials</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                            <!--Column-->
                            <div class="footer-column col-lg-6 col-md-6 col-sm-12">
                                <div class="footer-widget links-widget">
                                    <div class="widget-title">
                                        <h3>Our Services</h3>
                                    </div>
                                    <div class="widget-content">
                                        <ul>
                                            <li><a href="#">Installation & Monitoring</a></li>
                                            <li><a href="#">After Sales Service</a></li>
                                            <li><a href="#">Free Replacemrnt</a></li>
                                            <li><a href="#">Warrenty Claims</a></li>
                                            <li><a href="#">Energy Equipments</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--Column-->
                    <div class="footer-column col-lg-3 col-md-12 col-sm-12">
                        <div class="footer-widget gallery-widget">
                            <div class="widget-title">
                                <h3>Contact Us</h3>
                            </div>
                            <div class="info">
                                <!--Info Block-->
                                <div class="info-block">
                                    <div class="icon-box">
                                        <span class="icon">
                                            <img src="/images/icons/icon-message-1.png" alt="">
                                        </span>
                                    </div>
                                    <strong>Visit The Office</strong>
                                    <div class="info-text">102 Taily End Rd, NY</div>
                                </div>
                                <!--Info Block-->
                                <div class="info-block">
                                    <div class="icon-box">
                                        <span class="icon">
                                            <img src="/images/icons/icon-call-1.png" alt="">
                                        </span>
                                    </div>
                                    <strong>Phone Inquiry</strong>
                                    <div class="info-text">
                                        <a href="tel:(222)-303-4500">(222) 303 4500</a>
                                    </div>
                                </div>
                                <!--Info Block-->
                                <div class="info-block">
                                    <div class="icon-box">
                                        <span class="icon">
                                            <img src="/images/icons/icon-mail-1.png" alt="">
                                        </span>
                                    </div>
                                    <strong>Send Email</strong>
                                    <div class="info-text">
                                        <a href="mailto:info@domain.com">info@domain.com</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
					
					
                    
                </div>
				<div class="nav-box clearfix">
                	<div class="inner clearfix">
                    	<ul class="footer-nav clearfix">
                        	<li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Gallery</a></li>
                            <li><a href="#">Service</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                        
						<div class="footer_bttn">
                            <a href="contact.html" class="theme-btn btn-style-seven"><div class="btn-title"><span class="btn-txt">Contact Us</span><span class="btn-icon"><span class="icon flaticon-arrows-11"></span> </span></div></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Footer Bottom -->
        <div class="footer-bottom">
            <div class="auto-container">

                <div class="inner clearfix">
                    <!--Scroll to top-->
                    <div class="scroll-top-footer scroll-to-target" data-target="html"><span class="flaticon-arrows"></span></div>
                    <!--Copyright-->
                    <div class="copyright">Copyright (c) 2020. All rights <a href="http://www.bootstrapmb.com" title="">reserved</a>.</div>
                    <div class="footer-nav">
                        <ul class="clearfix">
                            <li><a href="#">Privacy Policy</a></li>
                            <li><a href="#">Sitemap</a></li>
                            <li><a href="#">Terms & Conditions</a></li>
                        </ul>
                    </div>
                </div>
                
            </div>
        </div>
        
    </footer>

</div>
<!--End pagewrapper-->

<script src="/js/jquery.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery-ui.js"></script>
<script src="/js/jquery.fancybox.js"></script>
<script src="/js/owl.js"></script>
<script src="/js/appear.js"></script>
<script src="/js/wow.js"></script>
<script src="/js/scrollbar.js"></script>
<script src="/js/validate.js"></script>
<script src="/js/paroller.js"></script>
<script src="/js/element-in-view.js"></script><script src="/js/custom-script.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/index.js"></script>
<script src="/js/settlement.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/vue-router.js"></script>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                furnitureFlag: false,
                applianceFlag: false,
                lightFlag: false,
                goodsList: [
                    {name:"hhh",price:200}
                ],
                skuList: [
                    {name:"<span style='color:red'>我</span>hh",price:200}
                ],
                isActive: false,
                cur_page: 1,
                pageSize: 9,
                totalCount: 0,
                keywords: null,
                result: {}
            }
        },
        methods: {
            showFurniture: () => {
                vm.furnitureFlag = true;
            },
            hideFurniture: () => {
                vm.furnitureFlag = false;
            },
            showAppliance: () => {
                vm.applianceFlag = true;
            },
            hideAppliance: () => {
                vm.applianceFlag = false;
            },
            showLight: () => {
                vm.lightFlag = true;
            },
            hideLight: () => {
                vm.lightFlag = false;
            },
            searchCart: () => {
                axios.get('').then(res => {
                    vm.goodsList = res.data
                });
            },
            searchToggler: () => {
            vm.isActive = true;
            document.body.classList.add('search-visible');
            },
            shutSearch: () => {
            vm.isActive = false;
            document.body.classList.remove('search-visible');
            },
            handleSizeChange(val) {
                vm.cur_page = val;
                vm.dosearch();
            },
            handleCurrentChange(val) {
                vm.pagesize = val;
            },
            dosearch: () => {
                axios.get(`/search?keywords=${vm.keywords}&pageNum=${vm.cur_page}`).then(res => {
                    vm.skuList = res.data.rows;
                    vm.totalCount = res.data.total;
                });
            },
            fastsearch: (e) => {
                axios.get(`/search?keywords=${e.target.innerText}`).then(res => {
                    vm.skuList = res.data.rows;
                    vm.totalCount = res.data.total;
                });
            },
            searchCart: () => {
                axios.get('http://localhost:9002/cart/list').then(res => {
                    vm.goodsList = res.data.data.orderItemList;
                    vm.result = res.data.data;
                });
            }
        },
        created() {
            
        },
    });
</script>
</html>